<template>	
	<ul class="city-alphabet">
		<li class="item"
			v-for="item in letters"
			v-bind:key="item"
			v-bind:ref="item"
			v-on:click="handleLetterClick"
			v-on:touchstart.prevent="handleTouchStart"
		    v-on:touchmove="handleTouchMove"
		    v-on:touchend="handleTouchEnd"
			>{{item}}</li>		
	</ul>	
</template>
<script type="text/javascript">
    export default{
        name:"CityAlphabet",
        props:{
            cities:Object
        },
        data () {
            return {
                msg:"city alphabet",
                touchStart:false,
                startY:0,           //静态值，字母表A的offsetTop,他在letters有数据展示的时候具有值
                timer:null          //全局句柄，老师用此来控制防止函数连续执行
            }
        },
        computed: {
            letters () {
                const letters = []
                for (let i in this.cities) {
                    letters.push(i)
                }
                return letters
            }
        },
        updated(){
            this.startY = this.$refs['A'][0].offsetTop  
            /**
             *  思考：
             *      1 为什么要在updated钩子函数时候获取这个值是正确、性能优化。
             *          这个值不需要变化，他是在updata是获取，因为数据是父组件异步获取、传入到子组件实例化，一次是在update中获取而不能是
             *          mouted
             *      2 其含义是字母A距离父盒子顶部的位置
             */

        },
        destory(){
            if(this.timer){
                clearTimeout(this.timer)
            }
        },
        methods:{
            handleLetterClick(e){ 
                /**
                 * 这种$emit("eventName",...)传参有一定问题，尤为他不支持强类型，无法编译是检查
                 *	他要求父组件使用时候一定要传递change事件，否则方法调用出错
                 * 	这里要try...catch...
                 * 来说这里处理联动使用的“状态提升”而不是状态管理，在机制上有点麻烦
                 */
                this.$emit('change', e.target.innerText);
            }, 

//函数防抖

            handleTouchStart () {
                this.touchStatus = true
            },
            handleTouchMove (evt) {    		
                if(this.touchStatus){    		
                    if(this.timer) clearTimeout(this.timer)
                    this.timer=setTimeout(()=>{
                        const touchY=evt.touches[0].clientY-79;   //clientY是距离整个视图最顶部的高度，减去头部+搜索框高度79就是当前touchY在当前和子的拖拽位置
                        const h=touchY-this.startY;     //当拖拽时会不断重新计算evt.touches[0].clientY获取一个新高度，这是原理，之后的计算都是技术处理
                        const index=Math.floor(h/20); 	//这个是20是每个字母的高度，获取高度后这么计算一下计算出你当前拖拽到哪个字母上		
                        if (index >= 0 && index < this.letters.length) {
                            this.$emit('change', this.letters[index])
                        }
                    },50); 
                }
            },
            handleTouchEnd () {
                this.touchStatus = false
            }
        }
    }
</script>

<style type="text/css" scoped>
	ul.city-alphabet{
		display: flex;   /* 使用弹性盒子布局 */
 		flex-direction: column;  /* 在纵轴上延伸 */
 		justify-content: center; /* 在主轴线上中心对齐 */
		position: absolute;top: 1.60rem;right: 0;bottom: 0;
		width: 0.4rem;
	}
	ul.city-alphabet li.item{
		line-height: 0.4rem;text-align: center;color: #00bcd4;
	}
</style>